<template>
    <div class="regcont">
    <el-row class="helptitle">忘记密码</el-row>

    <div class="helpmain">
      <div class="r_main" v-if="showhid==false">
         <el-form ref="regform" :model="regform" label-width="100px">
            <el-form-item label="手机号：">
                <el-input v-model="regform.phone" maxlength="11" placeholder="请输入手机号(该号码为登录账号)！" ></el-input>
            </el-form-item>
             <!-- <el-form-item label="验证码：">
                <el-input v-model="regform.checkma" style="width:84%" placeholder="请获取验证码！"></el-input>
                <el-button class="send" @click="checksend">发　送</el-button>
            </el-form-item> -->
             <el-form-item label="新密码：">
                <el-input v-model="regform.password" maxlength="32" minlength="8" placeholder="请输入新密码！"></el-input>
            </el-form-item>
             <el-form-item style="border:1px solid #EEE;width:84%"></el-form-item>
             <el-button class="submitlist" @click="handsubmit">提交修改</el-button>
         </el-form>
      </div>
        <div class="r_main" v-if="showhid==true">
            <div class="succss">
            <img src="../../assets/uimg/register_complete.png"/>
            <p class="succfin">修改完成！</p>
            <div class="greyline"></div>
            <router-link to="/login" class="backlo"><i class="el-icon-back"></i>返回首页登录</router-link>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import request2 from "../../utils/request-new";
export default {
    name:'forget',
    data(){
        return{
          regform:{
              name:'',   //姓名
              company:'', //公司名称
              password:'',//密码
              phone:'',  //手机号
              radio: '0',
              imgurl:''  //图片
          }, 
           imageUrl: '',    //  
           showhid:false  //注册成功之后显示
        }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        // console.log(res,"11111")
        this.regform.imgurl=res.data
      },
      /* beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' ||file.type === 'image/png';
        const isLt2M = file.size /1024 < 500;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 500kb!');
        }
        return isJPG && isLt2M;
      }, */
      handsubmit(){
         this.checkphone(this.regform.phone);
          if(this.regform.password==''){
          this.$message({
               type: 'warning',
               message: '密码不能为空！'
          }); 
          return;
       }
      },
      checkphone(mobile){
         if(mobile==''){
          this.$message({
               type: 'warning',
               message: '电话不能为空！'
          }); 
          return;
       }else if(!(/^1[345789]\d{9}$/.test(mobile))){
           this.$message({
               type: 'warning',
               message: '请输入有效联系电话！'
          });  
          return;
       }
      },


    }
}
</script>
<style lang="scss">
.regcont{
   .helptitle{
        color: #347dc7;
        padding: 20px 0 15px 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
   }
   .helpmain{
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     width: 80%;
     margin-bottom: 50px;

   }
     .r_main{
      width: 80%;
      margin: 0 auto;
    //   margin: 50px 0px;
    .el-form{
        padding: 50px 0px;
    }
      .el-form-item{
          margin: 0px 10% 20px 10%
      }
     .send{
         background-color: #337DC7;
         color: #fff;
         width: 15%;
          border-radius: 0px;
     }
     .el-input__inner{
         border-radius: 0px;
     }
     .submitlist{
        width: 40%;
        background-color: #337DC7;
        color:#fff;
        margin-left: 30%;
     }
   }
   }
</style>